<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门增删改查</title>
    <style>
        /* 基础按钮样式 */
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            background-color: #f0f0f0;
            color: #333;
        }

        /* 悬停效果 */
        .btn:hover {
            background-color: #e0e0e0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        /* 激活效果 */
        .btn:active {
            transform: translateY(1px);
        }

        /* 禁用状态 */
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        /* 主要按钮样式 */
        .btn-primary {
            background-color: darkgray;
            color: white;
        }

        .btn-primary:hover {
            background-color: #3367d6;
        }

        /* 输入框内按钮 */
        .input-btn {
            margin-left: 8px;
            padding: 8px 16px;
            font-size: 13px;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            text-align: center;
        }
        th {
            background-color: dimgray;
            padding: 8px;
        }
        /* 奇数行样式（浅色） */
        tbody tr:nth-child(odd) {
            background-color: #f2f2f2;
        }

        /* 偶数行样式（深色） */
        tbody tr:nth-child(even) {
            background-color: #e6e6e6;
        }

        /* 单元格通用样式 */
        td {
            padding: 8px;
            border: 1px solid #ddd;
        }
        input {
            border: none;
            align: center;

        }
        select {
            border: none;
            align: center
        }
        .div01 {
            padding: 10px;
            border: #ffffff thin solid;
            /*圆角边框*/
            border-radius: 10px;
            box-shadow: 0 0 10px;
            width: 80%;
            height: 450px;
            overflow: auto;
        }
        .input01 { border: 2px solid #919191; }

    </style>
</head>
<body>
<div>
    <h1 style="text-align: center">用户记录增删改查</h1>
    <div style="padding: 20px">
        <center>
            <div style=" height: 50px; width: 80%;line-height: 50px; border: 2px #919191 solid">
                <form action="">
                    登录名称：<input id="loginLogName" class="loginLogName input01"/>
                    登录时间：<input id="loginLogTime" class="loginLogTime input01" type="datetime-local" step="1"/>
                    登录等级：<input id="loginLogLevel" class="loginLogLevel input01"/>
                    登录方式：<input id="loginLogFlag" class="loginLogFlag input01"/>
                    <input type="hidden" id="loginLogId" class="loginLogId input01"/>
                    <input onclick="updateById()" type="button" value="编辑" style="margin-left: 15px"
                           class="btn btn-primary input-btn"/>
                    <input onclick="insertData()" type="button" value="新增" style="margin-left: 15px"
                           class="btn btn-primary input-btn"/>
                    <input onclick="searchData()" type="button" value="搜索" style="margin-left: 15px"
                           class="btn btn-primary input-btn"/>

                </form>
            </div>
            <div style="padding: 10px"></div>
            <div class="div01"></div>

        </center>


    </div>
</div>


</body>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script>
    <!--下面是jQuery入口 页面打开执行该函数-->
    $(function () {
        console.log("jquery-1.8.3.min.js");
        list();
    })
    // 下面是js调用ajax，负责接收后端响应的值data
    function list() {
        $.ajax({
            url: 'http://127.0.0.1:8082/loginLog/list',
            type: 'GET',
            dataType: 'json',
            success:function(data) {
                console.log(data.data);
                data = data.data;
                let str = `
                <table>
                    <thead>
                        <tr style="background-color: darkgray">
                            <td style="color: white">登录名</td>
                            <td style="color: white">登录时间</td>
                            <td style="color: white">登录等级</td>
                            <td style="color: white">登录方式</td>
                            <td style="color: white">操作</td>
                        </tr>
                    </thead>
                    <tbody>`
                for (let i = 0; i < data.length; i++) {
                    let item = data[i];
                    let formatTime = formatTimestamp(item.loginLogTime);
                    str += `
                        <tr>
                            <td>${item.loginLogName}</td>
                            <td>${formatTime}</td>
                            <td>${item.loginLogLevel}</td>
                            <td>${item.loginLogFlag}</td>
                            <td><a href="#" onclick="LoginLogDeleteById(${item.loginLogId})">删除</a>
                            <a href="#" onclick="findInfoLoginLog(${item.loginLogId})">编辑</a>
                            </td>
                        </tr>
                    `
                }

                str += `
                    </tbody>
                </table>`
                // 找到class=div01的标签，将str设置到html页面中
                $(".div01").html(str);
            }
        })
    }

    function formatTimestamp(timestamp) {
        const date = new Date(timestamp);

        // 获取日期时间组件
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始需+1
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }

    function LoginLogDeleteById(loginLogId) {
        $.ajax({
            url: 'http://127.0.0.1:8082/loginLog/delete/' + loginLogId,
            type: 'Delete',
            dataType: 'json',
            success:function(data) {
                console.log(data);
                data = data.data;
                if(data == "1") {
                    alert("删除成功!")
                    list();
                } else {
                    alert("删除失败!")
                }

            }
        })
    }

    /**
     * 根据主键查询
     * @param
     */
    function findInfoLoginLog(loginLogId) {
        $.ajax({
            url: 'http://127.0.0.1:8082/loginLog/getById/' + loginLogId,
            type: 'GET',
            dataType: 'json',
            success: function (data) { // data响应成功后从后端获取的值
                console.log(data)
                data = data.data;
                let formatTime = formatTimestamp(data.loginLogTime)
                $(".loginLogName").val(data.loginLogName)
                $(".loginLogId").val(data.loginLogId)
                $(".loginLogTime").val(formatTime)
                $(".loginLogLevel").val(data.loginLogLevel)
                $(".loginLogFlag").val(data.loginLogFlag)

                // document.body.dataset.currentSubject = subjectNo;
            }
        })
    }

    function updateById() {
        // 前端传过来的值是2025-08-09T10:21:16 而我们需要 2025-08-09 10:21:16
        let time = document.getElementById('loginLogTime').value
        let loginLogTime = time.split("T")[0]+ " " + time.split("T")[1]
        // refreshView();
        $.ajax({
            url: 'http://127.0.0.1:8082/loginLog/update',
            type: 'PUT',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify({
                loginLogId: $("#loginLogId").val(),  // 确保ID选择器
                loginLogName: $("#loginLogName").val(), // 建议统一jQuery写法
                loginLogTime: loginLogTime,
                loginLogLevel: $("#loginLogLevel").val(),
                loginLogFlag: $("#loginLogFlag").val()
            }),
            success: function (data) { // data响应成功后从后端获取的值
                console.log(data);
                list();
                data = data.data;
                clearFrom();
                if (data == "1") {
                    alert("修改成功！")
                } else {
                    alert("修改失败！")
                }
            }
        })
    }

    function insertData() {
        let time = document.getElementById('loginLogTime').value
        let loginLogTime = time.split("T")[0]+ " " + time.split("T")[1]
        console.log(time)
        console.log(loginLogTime)
        $.ajax({
            url: 'http://127.0.0.1:8082/loginLog/add',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ // 将对象转换为JSON字符串
                loginLogName: document.getElementById('loginLogName').value,
                loginLogTime: loginLogTime,
                loginLogLevel: document.getElementById('loginLogLevel').value,
                loginLogFlag: document.getElementById('loginLogFlag').value,
            }),
            dataType: 'JSON',
            success: function (data) {
                console.log(data);6
                list();
                data = data.data;
                if(data === 1) {
                    alert("插入成功！")
                    clearFrom()
                } else {
                    alert("插入失败！")
                }
            }
        })
    }

    function searchData() {
        let time = document.getElementById('loginLogTime').value
        console.log(time)
        let loginLogTime = null
        let loginLogName = document.getElementById('loginLogName').value
        let loginLogLevel = document.getElementById('loginLogLevel').value
        let loginLogFlag = document.getElementById('loginLogFlag').value
        // 用 !time 获取空的时间选择器的判断条件
        if (!time) {
            loginLogTime = null
        } else {
            loginLogTime = time.split("T")[0]+ " " + time.split("T")[1]
        }
        let data = {
            loginLogName: loginLogName,
            loginLogLevel: loginLogLevel,
            loginLogFlag: loginLogFlag,
            loginLogTime: loginLogTime,
        }
        console.log(data)
        $.ajax({
            url: 'http://127.0.0.1:8082/loginLog/search',
            type: 'GET',
            contentType: 'application/json',
            // JSON.Stringify(data)适用于POST + @RequestParam方法，不能用于GET方法
            data: data,
            dataType: 'JSON',
            success: function (data) {
                console.log(data);
                data = data.data;
                let str = `
                <table>
                    <thead>
                        <tr style="background-color: darkgray">
                            <td style="color: white">登录名</td>
                            <td style="color: white">登录时间</td>
                            <td style="color: white">登录等级</td>
                            <td style="color: white">登录方式</td>
                            <td style="color: white">操作</td>
                        </tr>
                    </thead>
                    <tbody>`
                for (let i = 0; i < data.length; i++) {
                    let item = data[i];
                    let formatTime = formatTimestamp(item.loginLogTime);
                    str += `
                        <tr>
                            <td>${item.loginLogName}</td>
                            <td>${formatTime}</td>
                            <td>${item.loginLogLevel}</td>
                            <td>${item.loginLogFlag}</td>
                            <td><a href="#" onclick="LoginLogDeleteById(${item.loginLogId})">删除</a>
                            <a href="#" onclick="findInfoLoginLog(${item.loginLogId})">编辑</a>
                            </td>
                        </tr>
                    `
                }

                str += `
                    </tbody>
                </table>`
                // 找到class=div01的标签，将str设置到html页面中
                $(".div01").html(str);
            }
        })
    }

    function clearFrom() {
        $(".loginLogName").val('')
        $(".loginLogTime").val('')  // 将data的值再赋给前端，显示在前端网页上（jquery特有方法）
        $(".loginLogLevel").val('')
        $(".loginLogFlag").val('')
    }

</script>

</html>